<template>
  <div class="channel-wrap">
    <!-- <Slideout :toggleSelectors="['.toggle-button','.modal','.modal-btn4','.modal-btn5',]"> -->
    <Slideout>
      <div class="">
        <nav id="menu">
          <div class="menu-header border-b clearfix">
            <div class="left">
              <img
                src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_avatar.png"
                alt=""
                class="avatar"
              />
              <div class="info">
                <p>{{ info.name }}</p>
                <p>{{ info.phone }}</p>
              </div>
            </div>
            <div class="right modal-btn5" @click="goPage('portalQr')">
              <img
                src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/QRcode.png"
                alt=""
                class="avatar"
              />
              <img
                src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/arrow.png"
                alt=""
                class="more-btn"
              />
            </div>
          </div>
          <!--           <div class="menu-item border-b clearfix modal-btn1" @click="goPage('home')">
            <div class="left">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/statisticalData.png" alt="" class="item-icon">
              <span class="item-name">统计信息</span>
            </div>
            <div class="right">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/arrow.png" alt="" class="more-btn">
            </div>
          </div> -->
          <!--           <div class="menu-item border-b clearfix modal-btn2" @click="goPage('member')">
            <div class="left">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/members.png" alt="" class="item-icon">
              <span class="item-name">我的会员</span>
            </div>
            <div class="right">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/arrow.png" alt="" class="more-btn">
            </div>
          </div> -->
          <!--           <div class="menu-item border-b clearfix modal-btn3" @click="goPage('channelList')">
            <div class="left">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/team.png" alt="" class="item-icon">
              <span class="item-name">我的团队</span>
            </div>
            <div class="right">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/arrow.png" alt="" class="more-btn">
            </div>
          </div> -->
          <div
            class="menu-item border-b clearfix modal-btn4"
            @click="goPage('doctorList')"
          >
            <div class="left">
              <img
                src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/orderList.png"
                alt=""
                class="item-icon"
              />
              <span class="item-name">订单列表</span>
            </div>
            <div class="right">
              <img
                src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/arrow.png"
                alt=""
                class="more-btn"
              />
            </div>
          </div>
          <!--        <div class="menu-item border-b clearfix" @click="goArticle()">
            <div class="left">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/promotion.png" alt="" class="item-icon">
              <span class="item-name">推广中心</span>
            </div>
            <div class="right">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/arrow.png" alt="" class="more-btn">
            </div>
          </div>
          <div class="menu-item border-b clearfix modal-btn6" @click="goPage('me')">
            <div class="left">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/personalCenter.png" alt="" class="item-icon">
              <span class="item-name">个人中心</span>
            </div>
            <div class="right">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/arrow.png" alt="" class="more-btn">
            </div>
          </div> -->
        </nav>
        <main id="panel">
          <!-- <div class="modal" :class="{ 'opened': isOpened }" @click="isOpened = !isOpened"></div> -->
          <!--          <header class="channel-header" @click="isOpened = !isOpened">
            <div>
              <button class="toggle-button"><img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v2/menu.png" alt=""></button>
            </div>
          </header> -->
          <router-view class="view"></router-view>
        </main>
      </div>
    </Slideout>
  </div>
</template>
<script>
import { wxshare } from "common/mixin";
import Slideout from "components/slideout.js";
import { mapActions } from "vuex";

export default {
  mixins: [wxshare],
  data() {
    return {
      isOpened: true,
      info: {},
    };
  },
  methods: {
    ...mapActions({
      getChannelDetail: "GetChannelDetail",
    }),
    goPage(page) {
      this.isOpened = true;
      let path = `/channel/${page}`;
      this.$router.push({ path });
    },
    goArticle() {
      this.isOpened = true;
      let path = `/activity`;
      this.$router.push({ path });
    },
  },
  components: {
    Slideout,
  },
  created() {
    // this.getChannelDetail().then(data => {
    //   console.log(data)
    //   this.info = data;
    // }).catch(msg => {
    // })
  },
};
</script>
<style lang="less">
@import "./index.less";

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 300px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
  background-color: #fff;
  color: #20436a;
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

.slideout-panel {
  background-color: #fff;
  position: relative;
  z-index: 1;
  will-change: transform;
  min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

.toggle-button {
  background: transparent;
}

.toggle-button img {
  width: 100%;
}
</style>
